<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <title>搜索</title>
    <link href="assets/bootstrap/css/bootstrap.min.css" th:href="@{/assets/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900|Dancing+Script:400,700|Raleway:400,100,300,700,900|Reenie+Beanie&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    <link href="assets/font-awesome/css/font-awesome.min.css" th:href="@{/assets/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link href="assets/css/plugins.css" th:href="@{/assets/css/plugins.css}" rel="stylesheet">
    <link href="style.css" th:href="@{/style.css}" rel="stylesheet">


</head>

<body class="top-navigation pushy-right-side regular-nav">

<!-- Site Overlay -->
<div class="site-overlay"></div>

<div id="master-wrapper">
    <div th:replace="main/common/header::header-menu"></div>

    <section class="white-wrapper">
        <div class="section-inner">
            <div class="container">
                <div class="row mb60 text-center">
                    <div class="col-sm-6 text-left match-height">
                        <h3 class="section-title">Ding</h3>
                    </div>
                    <div class="col-sm-6 text-left match-height">
                        <ul class="masonry-portfolio-filter list-unstyled list-inline wow fadeIn text-right vertical-center-js" data-wow-delay="0.2s">
                            <li><a class="btn btn-primary btn-transparent active" href="#" data-filter="*">All</a></li>
                            <li th:each="item:${category}"><a class="btn btn-primary btn-transparent" href="#"  th:data-filter="'.'+${item.categoryName}">[[${item.categoryName}]]</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="masonry-portfolio row">
                                    <div>
                                        <div class="masonry-portfolio-items">
                                            <div class="row">
                                                <div style="text-align: center;" th:if="${content.size()}==0">Shirt,没数据~</div>
                                                <div class="col-sm-4 masonry-portfolio-item mb30 mb30" th:classappend="${item.categoryName}" th:each="item:${content}">
                                                    <div class="hover-effect smoothie">
                                                        <a href="#" class="smoothie">
                                                            <img th:src="${item.imageUri}" th:if="${item.imageUri}!=null" alt="Image" class="img-responsive smoothie"></a>
                                                        <img th:src="@{/assets/images/blog/blog-6.jpg}" th:if="${item.imageUri}==null" alt="Image" class="img-responsive smoothie"></a>
                                                        <div class="hover-overlay smoothie text-center">
                                                            <div class="vertical-align-bottom">
                                                                <h4 th:text="${item.title}"></h4>
                                                            </div>
                                                        </div>
                                                        <div class="hover-caption dark-overlay smoothie text-center">
                                                            <div class="vertical-align-bottom">
                                                                <a th:href="${'/detail?id='+item.iD}" class="btn btn-primary mb20">详情</a>
                                                                <a th:href="${item.imageUri}" class="lb-link btn btn-primary mb20">大图</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <a href="#" id="back-to-top"><i class="fa fa-angle-up"></i></a>

</div>
<div class="sub-footer" style="text-align: center;">
    <p class="copyright"><small>XXX &copy; 2020-2099.虫虫专属.</small></p>
</div>
<script src="assets/js/jquery.min.js" th:src="@{/assets/js/jquery.min.js}"></script>
<script src="assets/bootstrap/js/bootstrap.min.js" th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>
<script src="assets/js/owl-carousel.js" th:src="@{/assets/js/owl-carousel.js}"></script>
<script src="assets/js/plugins.js" th:src="@{/assets/js/plugins.js}"></script>

<script src="assets/js/init.js" th:src="@{/assets/js/init.js}"></script>

</body>
</html>